<template>
  <div class="alert-wrapper">
    <div class="top">
      <div class="top_1">新增报警</div>
    </div>
    <!-- 表单 -->
    <div class="formStyle">
      <n-form ref="formRef" :model="formValue" :rules="rules" label-placement="left" label-width="auto"
        require-mark-placement="right-hanging" :size="size">
        <!-- 报警编号 -->
        <!-- <n-form-item label="报警编号" path="user.policenumber">
          <n-input v-model:value="formValue.user.policenumber" placeholder="请输入" />
        </n-form-item> -->
        <!-- 报警标题 -->
        <!-- <n-form-item label="报警标题" path="user.policeTitle">
          <n-input v-model:value="formValue.user.policeTitle" placeholder="请选择报警标题" />
        </n-form-item> -->
        <!-- 报警类型 -->
        <n-form-item label="报警类型" path="user.policeType">
          <!-- <n-select v-model:value="formValue.user.policeType" :options="generalOptions" placeholder="请选择报警类型" /> -->
          <n-cascader v-model:value="formValue.user.policeType" placeholder="报警类型" :options="test" check-strategy="child"
            size="medium" />
        </n-form-item>
        <!-- 报警内容 -->
        <n-form-item label="报警内容" path="user.policeContent">
          <!-- <n-select v-model:value="formValue.user.policeContent" placeholder="请选择报警内容" :options="generalOptions" /> -->
          <n-input v-model:value="formValue.user.policeContent" type="textarea" placeholder="报警内容"
            :autosize="{ minRows: 1, maxRows: 3 }" />
        </n-form-item>
        <!-- 所属区域 -->
        <!-- <n-form-item label="所属区域" path="user.policeArea">
          <n-select v-model:value="formValue.user.policeArea" placeholder="请选择区域" :options="belongArea" />
        </n-form-item> -->
        <!-- 所属点位 -->
        <!-- @click="handleFocus" -->
        <n-form-item label="所属点位" path="user.policePoint">
          <!-- <n-select v-model:value="formValue.user.policePoint" placeholder="请选择点位" :options="belongpoint" /> -->
          <n-input v-model:value="formValue.user.policePoint" type="textarea" placeholder="请选择点位"
            :autosize="{ minRows: 1, maxRows: 3 }"  @click="handleFocus"/>
        </n-form-item>
        <!-- 报警等级 -->
        <n-form-item label="经办人" path="user.policeGrade">
          <n-select v-model:value="formValue.user.policeGrade" placeholder="请选择" :options="belongGrade" />
        </n-form-item>
        <!-- 报警人姓名 -->
        <n-form-item label="报警人姓名" path="user.policeName">
          <n-input v-model:value="formValue.user.policeName" placeholder="请输入" />
        </n-form-item>
        <!-- 报警人电话 -->
        <n-form-item label="报警人电话" path="user.policePhone">
          <n-input v-model:value="formValue.user.policePhone" placeholder="请输入" />
        </n-form-item>
      </n-form>
    </div>
    <!-- 按钮 -->
    <div class="bottomStyle">
      <button class="bottomStyle_1" @click="reviewLeft()">取消</button>
      <button class="bottomStyle_2" @click="handleValidateButtonClick()">确认</button>
    </div>
  </div>

  <tengxun :showModalRef="showModalRef" @closeModalRed="closeModalRed"></tengxun>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { CascaderOption } from 'naive-ui'
// import { getbackend,infoAdd } from "../../api/model"
import tengxun from "../tengxun/index.vue"

const emit = defineEmits(['handleComponent'])
// size: ref("medium"),
const size = ref("small")
const formRef = ref()

const generalOptions = [{ label: 'A类', value: 'groode' }, { label: 'B类', value: 'groode' }, { label: 'C类', value: 'groode' }]
// 报警类型
const callPolice = [{ label: 'A区', value: 'goods' }, { label: 'B区', value: 'goods' }, { label: 'C区', value: 'goods' }]
// 所属区域
const belongArea = [{ label: 'A区', value: 'goods' }, { label: 'B区', value: 'goods' }, { label: 'C区', value: 'goods' }]
// 所属点位
const belongpoint = [{ label: 'A点', value: 'goods' }, { label: 'B点', value: 'goods' }, { label: 'C点', value: 'goods' }]
// 经办人
let belongGrade = ref([])
// ref([{ label: '小红', value: '小红' }, { label: '小白', value: '小白' }, { label: 'tomcat', value: 'tomcat' }])


const test = [
  { value: '求助', label: '求助', children: [{ value: '其它求助', label: '其它求助' }, { value: '生活噪音', label: '生活噪音' }, { value: '纠纷求助', label: '纠纷求助' }, { value: '紧急求助', label: '紧急求助' }] },
  { value: '行政(治安)警情', label: '行政(治安)警情', children: [{ value: '诈骗(治)', label: '诈骗(治)' }, { value: '盗窃(治)', label: '盗窃(治)' }, { value: '抢夺(治)', label: '抢夺(治)' }] },
  { value: '刑事警情', label: '刑事警情', children: [{ value: '杀人', label: '杀人' }, { value: '危害国家安全', label: '危害国家安全' }] },
  { value: '群体性事件', label: '群体性事件', children: [{ value: '聚众阻塞交通', label: '聚众阻塞交通' }, { value: '群众围堵冲击', label: '群众围堵冲击' }] },
  { value: '其它', label: '其它' },
]
// 内容
let formValue = ref({
  user: {
    // 编号
    policenumber: "",
    name: "",
    // 标题
    age: "",
    policeTitle: "",
    // 类型
    // selectValue: null,
    policeType: null,
    // 内容
    policeContent: null,
    // 区域
    policeArea: null,
    // 点位
    policePoint: null,
    // 等级 
    policeGrade: null,
    // 姓名
    policeName: "",
    // 电话
    policePhone: "",
  },
  phone: ""
});
// 验证规则
let rules = {
  user: {
    policenumber: {
      required: true,
      message: "请输入报警编号",
      trigger: "blur"
    },
    policeTitle: {
      required: true,
      message: "请输入报警标题",
      trigger: "blur"
    },
    policeType: {
      required: true,
      message: "请输入报警类型",
      trigger: "blur"
    },
    policeContent: {
      required: true,
      message: "请输入报警内容",
      trigger: "blur"
    },
    policeArea: {
      required: true,
      message: "请输入所属区域",
      trigger: "blur"
    },
    policePoint: {
      required: true,
      message: "请输入所属点位",
      trigger: "blur"
    },
    policeGrade: {
      required: true,
      message: "请输入报警等级",
      trigger: "blur"
    },
    policeName: {
      required: true,
      message: "请输入报警人姓名",
      trigger: "blur"
    },
    policePhone: {
      required: true,
      message: "请输入报警人电话",
      trigger: "blur",
      // type: "number"
    },
  },
  // phone: {
  //   required: true,
  //   message: "请输入电话号码",
  //   trigger: ["input"]
  // }
};

/**
 * 验证表单规则
 */
const handleValidateButtonClick = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      // message.success("验证成功");
      console.log('成功')
    } else {
      console.log('失败', errors);
      // message.error("验证失败");
    }
  });
}

/**
 * 新增报警类型
 */
const addInfo = ()=>{
  // infoAdd.then(()=>{

  // })
}

/**
 * 返回主页面
 */
const reviewLeft = () => {
  emit('handleComponent')
}

let showModalRef = ref(false)
/**
 * 对话框改变事件
 */
const handleFocus = () => {
  // alert('sdfgsdgfds')
  // console.log('sdfsdfsdfsdf')
  showModalRef.value = true
}

const closeModalRed = (inputValue)=>{
  showModalRef.value = false
  // @ts-ignore
  formValue.value.user.policePoint = inputValue
  // console.log('inputValue',inputValue,formValue.value.user.policePoint)
}

onMounted(async () => {
  // console.log('二级界面')
  // 获取经办人数据
  const trans = {
    departmentIds: [14],
    keyWord: "",
    page: 1,
    size: 20,
  }
  // @ts-ignore
  const { data } = await getbackend(trans)

  data.list.forEach((item) => {
    belongGrade.value.push({ label: item.name, value: item.name })
  })
  // console.log("getData")
})
</script>

<style lang="scss" scoped>
.alert-wrapper {
  background-color: rgba(36, 85, 132, 0.3);
  background-image: url("../../assets/border/leftBorder.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // border: 1px solid red;
  width: 365px;
  height: 593px;
  // height: 954px;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  border-radius: 4px;
  left: 10px;
  backdrop-filter: blur(4px);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
  user-select: none;

  .top {
    .top_1 {
      color: #fff;
      // border: 1px solid rgb(45, 12, 12);
      font-weight: bold;
      position: relative;
    }
  }

  .formStyle {
    margin-top: 10px;
    // border: 1px solid red;
    width: 100%;
    // height: 300px;
    // display: flex;
    // flex-direction: column;
  }

  .bottomStyle {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    // border: 1px solid red;

    .bottomStyle_1 {
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #3F91E5;
      background-color: transparent;
      margin-right: 5px;
      cursor: pointer;
      background-image: url("../../assets/border/button.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .bottomStyle_2 {
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #fff;
      background-color: transparent;
      margin-left: 5px;
      cursor: pointer;
      background-image: url("../../assets/border/button.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

:deep(.n-input .n-input-wrapper) {
  // width: 230px;
}

@media (min-width: 1919px) {
  .alert-wrapper {
    height: 954px;
  }
}
</style>